<!DOCTYPE html>
<html>
<head>
    <title>API测试</title>
    <meta charset="UTF-8">
</head>
<body>
<h2>用户注册测试</h2>
<form id="registerForm">
    <div>
        <label>用户名：</label>
        <input type="text" id="username" required>
    </div>
    <div>
        <label>邮箱：</label>
        <input type="email" id="email" required>
    </div>
    <div>
        <label>密码：</label>
        <input type="password" id="password" required>
    </div>
    <button type="submit">注册</button>
</form>

<div id="result"></div>

<script>
    document.getElementById('registerForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const data = {
            username: document.getElementById('username').value,
            email: document.getElementById('email').value,
            password: document.getElementById('password').value
        };

        fetch('/api/users/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('result').innerHTML =
                '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
        })
        .catch(error => {
            document.getElementById('result').innerHTML =
                '<p style="color: red;">错误: ' + error.message + '</p>';
        });
    });
</script>
</body>
</html>